<template>
  <div class="detailList">
    <van-cell-group v-if="filterOrderDetail" :border="false">
        <van-cell
          title-class="titleTitle"
          value-class="titleValue"
          :border="false"
          :title="'订单：' + filterOrderDetail.lsId"
          :value="statusText"
        />
        <van-cell
          title-class="valueTitle"
          value-class="valueValue"
          :border="false"
          title="流水号"
          :value="filterOrderDetail.rseqNo"
        />
        <van-cell
          title-class="valueTitle"
          value-class="valueValue"
          :border="false"
          title="客户名"
          :value="filterOrderDetail.lenderName"
        />
        <van-cell
          title-class="valueTitle"
          value-class="valueValue"
          :border="false"
          title="地址"
          :value="filterOrderDetail.lenderAddress"
        />
        <van-cell
          title-class="valueTitle"
          value-class="valueValue"
          :border="false"
          title="结束时间"
          :value="filterOrderDetail.workOrderEndDate"
        />
        <van-cell
          title-class="valueTitle"
          value-class="valueValue"
          :border="false"
          title="任务说明"
          :value="filterOrderDetail.workOrderDesc"
        />
        <van-cell
          title-class="valueTitle"
          value-class="valueValue"
          :border="false"
          title="经办人员[建任务]"
          :value="filterOrderDetail.lenderName"
        />
    </van-cell-group>
    <van-empty v-else image="search" description="没有查询到内容" />
    <van-divider dashed />
    <van-cell
      v-if="lsStatus !== '2'"
      title-class="valueTitle"
      :border="false"
      icon="location-o"
      title="地图"
    />
    <div v-if="lsStatus === '2'">
      <van-row>
        <van-col span="24">
          <h4>实拍视频</h4>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24">
          <div class="radiusBox">
            <sVideo :videoSrc="filterOrderDetail.videoImg" />
            <p>实拍视频</p>
          </div>
        </van-col>
      </van-row>
      <van-divider dashed />
      <van-row>
        <van-col span="24">
          <h4>实拍图片</h4>
        </van-col>
      </van-row>
      <van-row gutter="10">
        <van-col span="8">
          <div class="radiusBox">
            <van-image
              width="100px"
              height="60px"
              fit="cover"
              @click="showImage(filterOrderDetail.gateImg)"
              :src="filterOrderDetail.gateImg"
            />
            <p>小区大门</p>
          </div>
        </van-col>
        <van-col span="8">
          <div class="radiusBox">
            <van-image
              width="100px"
              height="60px"
              fit="cover"
              @click="showImage(filterOrderDetail.apartmentImg)"
              :src="filterOrderDetail.apartmentImg"
            />
            <p>小区楼栋号</p>
          </div>
        </van-col>
        <van-col span="8">
          <div class="radiusBox">
            <van-image
              width="100px"
              height="60px"
              fit="cover"
              @click="showImage(filterOrderDetail.buildingImg)"
              :src="filterOrderDetail.buildingImg"
            />
            <p>小区单元楼</p>
          </div>
        </van-col>
      </van-row>
      <van-row gutter="10">
        <van-col span="8">
          <div class="radiusBox">
            <van-image
              width="100px"
              height="60px"
              fit="cover"
              @click="showImage(filterOrderDetail.houseNumberImg)"
              :src="filterOrderDetail.houseNumberImg"
            />
            <p>入户门牌</p>
          </div>
        </van-col>
        <van-col span="8">
          <div class="radiusBox">
            <van-image
              width="100px"
              height="60px"
              fit="cover"
              @click="showImage(filterOrderDetail.indoorImg)"
              :src="filterOrderDetail.indoorImg[0]"
            />
            <p>室内(6张)</p>
          </div>
        </van-col>
      </van-row>
      <van-divider dashed />
      <div class="desc">
        <h4>备注说明</h4>
        <p>{{ filterOrderDetail.workOrderDesc }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { status } from '@/utils/tools'
import sVideo from '@/components/Video.vue'
import { ImagePreview } from 'vant'
export default {
  name: 'sTaskDetail',
  props:[ 'filterOrderDetail' ],
  components: {
    sVideo
  },
  computed: {
    lsStatus() {
      return this.$route.params.lsStatus
    },
    statusText() {
      return status(this.lsStatus)
    }
  },
  methods: {
    showImage(img) {
      let imageArr = []
      if (typeof img === 'string') {
        imageArr.push(img)
        ImagePreview(imageArr)
      } else {
        ImagePreview(img)
      }
    }
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
h4 {
  margin-bottom: @padding-sm;
}
.detailList {
  padding: @padding-sm;
}
.van-cell {
  padding-top: 4px;
  padding-bottom: 4px;
}
.titleTitle,
.titleValue {
  color: black;
  font-weight: 500;
  font-size: @font-size-md;
}
.titleTitle {
  text-align: left;
}
.valueTitle {
  flex: 0 0 120px;
}
.valueTitle,
.valueValue {
  text-align: left;
  color: @gray-6;
  font-size: @font-size-sm;
}
.radiusBox {
  position: relative;
  width: 100px;
  height: 85px;
  border-radius: @border-radius-md;
  overflow: hidden;
  p {
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 2em;
    border-radius: 0 0 @border-radius-md @border-radius-md;
    width: 100%;
    margin-bottom: @padding-sm;
    text-align: center;
    font-size: @font-size-sm;
    background: @gray-2;
  }
}
.desc {
  font-size: @font-size-md;
}
</style>
